<mat-card class="p-0">
  <mat-card-title class="mat-bg-primary m-0">
  	 <div class="card-title-text">
  	 	{{"Shell" | translate}}
  	 </div>
  </mat-card-title>

	<div
		id="terminal"
		[ngStyle]="{'font-size' : font_size+'px'}"
		#terminal
		(window:resize)="onResize($event)"
		(contextmenu)="onRightClick()"
	></div>

	<mat-card-content *ngIf="shellConnected; else Reconnect">
		<!-- <mat-divider class="mb-1"></mat-divider> -->
		{{"Set font size" | translate}}:
		<mat-slider min="10" max="20" step="1" [(ngModel)]="font_size"
			ix-auto ix-auto-type="slider" ix-auto-identifier="Set font size"></mat-slider>
		<button mat-button class="mat-basic" (click)="resetDefault()" matTooltip="{{'Reset font size to default value' | translate }}"
		ix-auto ix-auto-type="button" ix-auto-identifier="RESTORE DEFAULT">{{"Restore default" | translate}}</button>
		<tooltip class="shellTooltip" position="left" [message]=usage_tooltip 
			ix-auto ix-auto-type="tooltip-icon" ix-auto-identifier="Shell"></tooltip>
	</mat-card-content>
	<ng-template #Reconnect>
		<mat-card-content>
			<button mat-button color="primary" (click)="reconnect()" 
				ix-auto ix-auto-type="button" ix-auto-identifier="RECONNECT"
			>{{"Reconnect" | translate}}</button>
		</mat-card-content>
	</ng-template>
</mat-card>
